<div class="da-list-wrap">

  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item><a routerLink="/">{{ 'system.breadcrumb.home' | translate }}</a></d-breadcrumb-item>
      <d-breadcrumb-item><a
          routerLink="/pages/systemset/Encoding-Rules">{{ 'system.breadcrumb.EncodingRules' | translate }}</a>
      </d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'system.breadcrumb.EditEncodingRules' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
  </div>
  <div class="da-content-wrapper">
    <div class="card ">
      <div style="text-align: center;" *ngIf="this.editEndcode.itemsLength == 2">
        <h2>
          <span>{{this.editEndcode.items[0].value}}</span>
          <span>{{this.editEndcode.separator}}</span>
          <span>{{this.editEndcode.items[1].value}}</span>
        </h2>
        <p>
          <span>{{this.editEndcode.items[0].rule | ruleToText}}</span>
          <span>{{this.editEndcode.separator}}</span>
          <span>{{this.editEndcode.items[1].rule | ruleToText}}</span>
        </p>
      </div>
      <div style="text-align: center;" *ngIf="this.editEndcode.itemsLength == 3">
        <h2>
          <span>{{this.editEndcode.items[0].value}}</span>
          <span>{{this.editEndcode.separator}}</span>
          <span>{{this.editEndcode.items[1].value}}</span>
          <span *ngIf="this.editEndcode.itemsLength===3">{{this.editEndcode.separator}}</span>
          <span *ngIf="this.editEndcode.itemsLength===3">{{this.editEndcode.items[2].value}}</span>
        </h2>
        <p>
          <span>{{this.editEndcode.items[0].rule | ruleToText}}</span>
          <span>{{this.editEndcode.separator}}</span>
          <span>{{this.editEndcode.items[1].rule | ruleToText}}</span>
          <span *ngIf="this.editEndcode.itemsLength ===3">{{this.editEndcode.separator}}</span>
          <span *ngIf="this.editEndcode.itemsLength===3">{{this.editEndcode.items[2].rule | ruleToText }}</span>
        </p>
      </div>
    </div>
    <div class="card px-5 encode-rule">
      <form>
        <d-row [dGutter]="24">
          <d-col [dSpan]="{ss:24,mm:6}">
            <label>
              编码类型
            </label>
            <input disabled type="text" dTextInput [size]="'sm'" name="type" [(ngModel)]="this.editEndcode.type"
              #type="ngModel">
            <div class="invalid" *ngIf="type.invalid && type.touched">*值不能为空</div>
          </d-col>
          <d-col [dSpan]="{ss:24,mm:6}">
            <label>
              编码分段
            </label>
            <d-select [options]="this.selectOptions" name="select1" [filterKey]="'label'"
              [(ngModel)]="this.editEndcode.itemsLength" (ngModelChange)="itemsLength($event)"></d-select>
          </d-col>
          <d-col [dSpan]="{ss:24,mm:6}">
            <label>
              分割符号
            </label>
            <input type="text" dTextInput [size]="'sm'" name="separator" [(ngModel)]="this.editEndcode.separator">
          </d-col>
          <d-col [dSpan]="{ss:24,mm:6}">
            <label>
              是否启用
            </label>
            <div class="mt-2">
              <d-toggle [(ngModel)]="this.editEndcode.enabled" name="enable"></d-toggle>
            </div>
          </d-col>
        </d-row>
      </form>
    </div>

    <div class="encode-rule-lists mt-5">
      <d-row class="mt-5" [dGutter]="24" [dGutterNoOuter]="true">
        <d-col [dSpan]="{ss:24,mm:6}">
          <div class="card encode-rule-list">
            <label class="form-label">编码1段</label>
            <app-encode-section [set]="1" [selectRule]="this.editEndcode.items[0].rule"
              [value]="this.editEndcode.items[0].value" [selected]="this.typeOptions[this.editEndcode.items[0].rule]"
              [shouldValidate]="this.shouldValidate" [id]="this.editEndcode.items[0].id"
              [length]="this.editEndcode.items[0].length" [init]="this.editEndcode.items[0].init"
              (PutdataChange)="onDataChanged($event,0)" [dataselected]="{ label: 'yyyyMMdd', value:'yyyyMMdd' }">
            </app-encode-section>
          </div>
        </d-col>
        <d-col [dSpan]="{ss:24,mm:6}">
          <div class="card encode-rule-list">
            <label class="form-label">编码2段</label>
            <app-encode-section *ngIf="this.editEndcode.itemsLength===3" [selectRule]="this.editEndcode.items[1].rule"
              [selected]="this.typeOptions[this.editEndcode.items[1].rule]" [shouldValidate]="this.shouldValidate"
              [value]="this.editEndcode.items[1].value" [id]="this.editEndcode.items[1].id"
              [length]="this.editEndcode.items[1].length" [init]="this.editEndcode.items[1].init"
              (PutdataChange)="onDataChanged($event,1)" [dataselected]="{ label: 'yyyyMMdd', value:'yyyyMMdd' }">
            </app-encode-section>
            <app-encode-section [set]="3" *ngIf="this.editEndcode.itemsLength===2"
              [selectRule]="this.editEndcode.items[1].rule"
              [selected]="this.typeOptions[this.editEndcode.items[1].rule]" [shouldValidate]="this.shouldValidate"
              [value]="this.editEndcode.items[1].value" [id]="this.editEndcode.items[1].id"
              [length]="this.editEndcode.items[1].length" [init]="this.editEndcode.items[1].init"
              (PutdataChange)="onDataChanged($event,1)" [dataselected]="{ label: 'yyyyMMdd', value:'yyyyMMdd' }">
            </app-encode-section>
          </div>
        </d-col>
        <d-col [dSpan]="{ss:24,mm:6}" *ngIf="this.editEndcode.itemsLength===3">
          <div class="card encode-rule-list">
            <label class="form-label" *ngIf="this.editEndcode.itemsLength===3">编码3段</label>
            <app-encode-section [set]="3" [selectRule]="this.editEndcode.items[2].rule"
              [selected]="this.typeOptions[this.editEndcode.items[2].rule]" [shouldValidate]="this.shouldValidate"
              [value]="this.editEndcode.items[2].value" [id]="this.editEndcode.items[2].id"
              [length]="this.editEndcode.items[2].length" [init]="this.editEndcode.items[2].init"
              (PutdataChange)="onDataChanged($event,2)" [dataselected]="{ label: 'yyyyMMdd', value:'yyyyMMdd' }">
            </app-encode-section>
          </div>
        </d-col>
      </d-row>
    </div>


    <div class=" footer">
      <div style="text-align: center;">
        <d-button id="primaryBtn" style="margin-left: 8px" (btnClick)="submit()">确定</d-button>
        <d-button bsStyle="common" (click)="cancle()">取消</d-button>
      </div>
    </div>
  </div>
</div>

<d-toast [value]="msgs" [life]="2000" [styleClass]="'custom-class'" [style]="{ left: '50%',top:'10px' }"></d-toast>
